<template>
	<view>
		<view class="swiper">
			<swiper :indicator-dots="true" :autoplay="true" :interval="3000" :duration="1000" >
				<swiper-item class="swiper-item" v-for="item in rotation" :key="item.id">
					 <image :src = "item.url" @click="Page"></image>
				</swiper-item>
			</swiper>
		</view>
		<view class="Both">
			<view class="phb" @click="bang"></view>
			<view class="undate" @click="undate"></view>
		</view>
		<view class="box">
			<view class="bt1">
				<view class="remeng">
					<text>热门连载</text>
				</view>
				<view class="gd" @click="more">
					<button class="more">更多></button>
				</view>
			</view>
			<view class="box2">
				<view class="pothon" v-for="(item) in totol" @click="Page">
					<view class="pt">
						<text class="pingfe">{{pingfe}}</text>
					</view>
					<view >
						<text class="text">{{Text}}</text>
					</view>
				</view>
				<button class="huang">换一换</button>
			</view>
			<view class="hezi" v-for="(item) in hezi">
				<view class="bt1">
						<view class="remeng">
							<text>新番出炉</text>
						</view>
						<view class="gd" >
							<navigator url="../../new/more/more">
								<button class="more">更多></button>
							</navigator>
					</view>
					</view>
					<view class="box2">
						<view class="pothon" v-for="(item) in start" @click="Page">
							<view class="pt">
								<text class="pingfe">{{pingfe}}</text>
							</view>
							<view >
								<text class="text">{{Text}}</text>
							</view>
						</view>
					</view>
				</view>
			</view>
			<view class="end">
				<text>没有更多数据</text>
			</view>
	</view>
</template>

<script>
	export default {
		name:"tujian",
		data() {
			return {
				totol: 6,
				start:10,
				Text:'黑莲花攻略高手',
				pingfe:'9.0分',
				hezi:4,
				rotation: [
				             {
				                 id: 1,
				                 url: 'https://imgcps.jd.com/ling4/100035927374/5Lqs6YCJ5aW96LSn/5L2g5YC85b6X5oul5pyJ/p-5bd8253082acdd181d02fa42/60f03300/cr/s/q.jpg'
				             },
				             {
				                 id: 2,
				                 url: 'https://img12.360buyimg.com/pop/s1180x940_jfs/t1/217650/27/18929/95548/627b69e5E7f4c1ff2/1a6be6e037e34e5c.jpg.webp'
				             },
				             {
				                 id: 3,
				                 url: 'https://imgcps.jd.com/ling4/100012043978/5Lqs6YCJ5aW96LSn/5L2g5YC85b6X5oul5pyJ/p-5bd8253082acdd181d02fa09/00d13111/cr/s/q.jpg'
				             },
				             {
				                 id: 4,
				                 url: 'https://imgcps.jd.com/ling4/100014348458/5Lqs6YCJ5aW96LSn/5L2g5YC85b6X5oul5pyJ/p-5bd8253082acdd181d02fa7f/aa5a1911/cr/s/q.jpg'
				             }
				         ],
			};
		},
		methods: {
			bang(){
				uni.navigateTo({
					url:'../../new/bang/bang'
				})
			},
			undate(){
				uni.navigateTo({
					url:'../../new/undate/undate'
				})
			},
			more(){
				uni.navigateTo({
					url:'../../new/more/more'
				})
			},
			Page(){
				uni.navigateTo({
					url:'../../new/read/read'
				})
			},
		}
	}
</script>

<style>
	.swiper{
		width: 90%;
		margin-left: 5%;
		margin-top: 5px;
	}
	.swiper-item{
		border-radius: 10px;
	}
	.Both{
		width: 90%;
		margin-left: 5%;
		margin-top: 20px;
		height: 100px;
		display: flex;
		flex-direction: row;
	}
	.phb,.undate{
		width: 48%;
		height: 100%;
		border-radius: 5px;
		background-image: url(https://img2.baidu.com/it/u=1246783588,697702876&fm=253&fmt=auto&app=138&f=JPEG?w=500&h=500);
		background-repeat: no-repeat;
		background-size: cover;
	}
	.undate{
		margin-left: 4%;
	}
	.box{
		width: 90%;
		margin-left: 5%;
		display: flex;
		flex-direction: column;
	}
	.bt1{
		width: 100%;
		height: 40px;
		display: flex;
		flex-direction: row;
		justify-content: space-between;
		margin-top: 20px;
	}
	.remeng{
		width: 49%;
		height: 100%;
		font-size: 24px;
		font-weight: bold;
	}
	.gd{
		width: 49%;
		height: 80%;
	}
	.more{
		height: 35px;
		width: 58%;
		background-color: #edeef0;
		margin-left: 42%;
		color: #999999;
		border-radius: 50px;
		text-align: center;
		font-size: 16px;
	}
	.box2{
		width: 100%;
		display: flex;
		flex-direction: row;
		justify-content: space-between;
		flex-wrap: wrap;
	}
	.pothon{
		width: 32%;
		height: 150px;
		margin-bottom: 5px;
	}
	.pt{
		width: 100%;
		height: 80%;
		border-radius: 10px;
		background-image: url(https://img1.baidu.com/it/u=1328452786,1468100545&fm=253&fmt=auto&app=138&f=JPEG?w=500&h=500);
		background-size: cover;
		position: relative;
	}
	.pingfe{
		color: #f7b11b;
		font-size: 12px;
		position: absolute;
		top: 83%;
		left: 60%;
	}
	.text{
		color: #000;
		font-size: 12px;
		margin-top: 3px;
		text-align: center;
	}
	.huang{
		width: 95%;
		border-radius: 50px;
		background-color: #e3e4e6;
		color: #838383;
		font-size: 18px;
	}
	.end{
		color: #bababb;
		font-size: 18px;
		text-align: center;
		margin: 10px;
	}
</style>